import { Component } from 'react';
import '../../css/comment.css'
class Comment extends Component {
    // 初始值
    state = {
        title: '',    //评论人
        context: '',  //评论内容
        list: [
            {
                title: '评论人：图图',
                context: '评论内容：很好，很不错'
            }
        ],
    }
    // 获取input值
    upInput = (val) => {
        console.log(val);
        let title = val.target.value
        this.setState({
            title
        })
       
    }
    // 获取文本域的值
    upTextarea = (val) => {
        // console.log(val)
        this.setState({
            context: val.target.value
        })
    }
    // 发表评论按钮
    btn = () => {
        console.log(this.state.title,this.state.context);
        // 添加到列表
        const {title,context} = this.state
        let newArr = this.state.list.concat([{ title, context }])
        this.setState({
            list:newArr,
            title:'',
            context:''
        })
    }
    // 清空所有评论
    btns = (index) =>{
        this.state.list.splice(index)
        this.setState({
            list:this.state.list
        })
    }
    // 删除
    del = (index) =>{
        this.state.list.splice(index,1)
        this.setState({
            list:this.state.list
        })
    }
    // 计算一共多少条评论 
    get sum (){
        return this.state.list.length
    }
    render() {
        return (<>
            <div className='box'>
                <div>
                    <input type="text" value={this.state.title} onChange={this.upInput} placeholder='请输入评论人' />
                </div>
                <div>
                    <textarea cols="30" rows="10" value={this.state.context} onChange={this.upTextarea} placeholder='请输入评论内容' ></textarea>
                </div>
                <button onClick={this.btn}>发表评论</button>
                <button onClick={this.btns}>清空</button>
                <div>
                    <ul>
                        {
                            this.state.list.map((item,index)=><li key={index}>
                                <h3>{item.title}</h3>
                                <p>{item.context}</p>
                                <button className='del' onClick={() => this.del(index)}>删除</button>
                            </li>)
                        }
                    </ul>
                </div>
                <div className='foor'>
                    共计{this.sum}条评论
                </div>
            </div>
        </>
        );
    }
}
export default Comment;